<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>九九乘法表</title>
</head>
<style>
  * {
    margin: 1px;
    padding: 1px;
  }

  table {

    /*width: 50%;*/
    /*border-collapse: collapse;*/
    /* 合并单元格 */
    /*border-spacing: 0;*/
    /* 单元格间距 */
    /*table-layout: fixed;*/
    /* 必须要设置为fixed，这样列宽就可以由表格宽度和列宽度设定了 */
    /*text-align: center;*/
    /*direction: rtl;*/
  }

  td {
    white-space: nowrap;
  }

  .red {
    background-color: red;
    color: #fff;
  }

  .hiddenDom {
    opacity: 0%;
  }
</style>

<body>
  <h1>九九乘法表</h1>
  <table border="1">
    <tbody id="multTable">
    </tbody>
  </table>

</body>
<script>

  //获取元素创建节点
  let multTable = document.getElementById("multTable");

  let needNum = 50;

  // 两层循环嵌套,外层生成tr（行），内层生成td（单元格）及内容
  for (let m = 1; m <= needNum; m++) {
    let tr = document.createElement("tr");

    for (let n = needNum; n >= 1; n--) {
      // 计算乘积
      let result = m * n;
      // 是否需要显示
      let isShow = n <= m
      // 单元格元素
      let td = document.createElement("td");

      if (isShow) {
        if (n == 7 || m == 7) {
          // 第七列 和 第七行
          td.setAttribute('class', 'red');
        }

        // 确定 含有“7”的数字
        let hasSeven = false;
        String(result).split('').map(Number).forEach(item => {
          if (item == 7) hasSeven = true;
        })

        if (hasSeven) {
          td.setAttribute('class', 'red');
        }
      }

      //单元格的内容
      td.innerText = `${n} * ${m} = ${result}`;
      if (!isShow) td.setAttribute('class', 'hiddenDom')
      tr.appendChild(td)
    }
    multTable.appendChild(tr);
  }

</script>

</html>
